﻿<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <title>美妆镜消消乐抽奖</title>
  <style type="text/css">
  * {
    padding: 0;margin: 0;cursor: default;
  }

  body {
    font: 12px/20px Palatino;
  }
  </style>
  <!--<script type="text/javascript">document.write('<script type="text/javascript" src="../resource/js/resource_loader.js?ver='+Math.random()+'"><\/script>')</script>-->
</head>
<body>

<div id="spilgames-root"></div>
<button id="closeButton"></button>
<button id="rulesButton">——游戏规则——</button>
<div id="gameRules"></div>
<div id="rulesImg">
  <div class="rulesTitle">游戏规则</div>
  <div class="rulesContent">
    1.每个顾客每天可以玩此游戏的次数不限，每次的积分达到200均可以进行抽奖；<br>
    2.支持顾客线上进行玩游戏，也支持线下实体店内在魔妆镜上面玩游戏；<br>
    3.游戏获得的优惠仅限于展会期间：2019年5月20-25日；<br>
    4.游戏获得的优惠内容只能与帕克西软件开发有限公司进行消费才享受相应的优惠；<br>
    5.顾客与帕克西业务员进行核销优惠内容，优惠内容一经核销则将删除，若顾客不小心删除，则后果自负；<br>
    6.优惠的内容都存在于魔妆镜微信公众号卡券内<br>
    7.
    在展会上抽到的优惠电子券可通过交押金形式确认采购设备，在活动时间内交押金都算已确认为采购设备，押金为每台设备500元。过期交的押金不参与本次促销活动，已交的押金不购买设备不退还，当作违约金。设备交货期为十五个工作日，以收到押金或货款日期为准。<br>
    8.最终解释权归于广州帕克西软件开发有限公司所有。<br>
  </div>
</div>

<!-- 时间分数 -->
<div id="timeScore"></div>

<!-- 返回按钮 -->
<button id="reset"></button>

<!-- 抽奖页面 -->
<div id="lotteryBackground"></div>
<div id="lottery">
  <div class="lotteryTitle">奖品大转盘</div>
  <div class="lotteryIcon"></div>
  <div id="lotteryImg">
    <div class="Turntable_1">
      <div class="Turntable_img"></div>
      <div class="Turntable_cash"></div>
      <div class="Turntable_content"></div>
    </div>
    <div class="Turntable_2">
      <div class="Turntable_img"></div>
      <div class="Turntable_cash"></div>
      <div class="Turntable_content"></div>
    </div>
    <div class="Turntable_3">
      <div class="Turntable_img"></div>
      <div class="Turntable_cash"></div>
      <div class="Turntable_content"></div>
    </div>
    <div class="Turntable_4">
      <div class="Turntable_img"></div>
      <div class="Turntable_cash"></div>
      <div class="Turntable_content"></div>
    </div>
    <div class="Turntable_5">
      <div class="Turntable_img"></div>
      <div class="Turntable_cash"></div>
      <div class="Turntable_content"></div>
    </div>
    <div class="Turntable_6">
      <div class="Turntable_img"></div>
      <div class="Turntable_cash"></div>
      <div class="Turntable_content"></div>
    </div>
  </div>
  <!-- 转盘数据 -->
  <button id="lotteryButton">
    <div>开始抽奖</div>
  </button>

  <button class="oneMore replay-btn">
    <div>再玩一次</div>
  </button>

  <button class="back_app" id="backApp">
    <div>体验试妆</div>
  </button>

  <!-- 红包图 -->
  <div class="red_envelope">
    <div class="red_title">恭喜你获得一张现金优惠券
    </div>
    <div class="red_cash"></div>
    <button class="look_card">查看卡包</button>
    <div class="red_QRcode">
      <img src="" alt="">
    </div>
  </div>

  <!-- 红包规则 -->
  <div class="red_rules">
    1.游戏获得的抵扣券，仅限购买帕克西软件公司魔妆镜安卓版S2机型，才能享受相应抵扣券的优惠价；<br>
    2.优惠详情内容在游戏结束后，扫描弹出的二维码，进入到魔妆镜微信公众号卡包内，进行查询核销。<br>
    3.此游戏抵扣券使用仅限于2019年5月20日至2019年5月25日的上海新国际博览中心，N5馆，N5D02展位，过期抵扣券作废。
  </div>
</div>

<!-- 二维码 -->
<div id="QR_code"></div>

<!-- 失败页面 -->
<div id="failImg">
  <div class="failTitle">挑战失败</div>
  <div class="failIcon"></div>
  <div class="failScore" id="failScore">
    <!-- 分数 -->
  </div>
  <button class="fail-btn replay-btn">
    <div>再玩一次</div>
  </button>
</div>

<!-- 分享 暂时没用 -->
<div id="share" style="display: none">
  <img width="100%" height="100%" src="bitmap/share.png"
       style="position: fixed; z-index: 9999; top: 0; left: 0; display: block"
       ontouchstart="document.getElementById(&#39;share&#39;).style.display=&#39;none&#39;;">
</div>
<script src="/js/panx-vconsole.js"></script>
<script>
  /* global panxVConsole */
  panxVConsole({ left: '0px', top: '0px' });
</script>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  var SpilGamesBrandTimer = +new Date(),
    _SPTimer = {
      w: {}, start: function (a) {
        this.w[(a || "_")] = +new Date()
      }, end: function (a) {
        window._gaq = window._gaq || [], a = a || "_"
        if (this.w[a]) {
        }
      }
    }
  _SPTimer.start('pageLoad')
</script>
<script>
  // var API_LIST={
  // 	HOST_NAME :'window.location.origin',
  // 	 QR_code:'/api.myjson.com/bins/xolrm',
  // }

  var WECHAT_BROWSER_UA = 'MicroMessenger'
  var closeButton = document.getElementById('closeButton')
  var rulesButton = document.getElementById('rulesButton')
  var gameRules = document.getElementById('gameRules')
  var rulesImg = document.getElementById('rulesImg')
  var resetButton = document.getElementById('reset')
  var lotteryButton = document.getElementById('lotteryButton')
  var lottery = document.getElementById('lottery')
  var lotteryBackground = document.getElementById('lotteryBackground')
  var lotteryImg = document.getElementById('lotteryImg')
  var QR_code = document.getElementById('QR_code')
  var backAppBtn = document.getElementById('backApp')

  checkRedirectWechatOAuth();

  // 点开游戏规则的按钮
  rulesButton.addEventListener("touchstart", function () {
    gameRules.style.display = "block"
    rulesImg.style.display = "block"
  })

  // 游戏规则黑色背景遮罩
  gameRules.addEventListener("touchstart", function () {
    gameRules.style.display = "none"
    rulesImg.style.display = "none"
  })

	// 关闭按钮
	closeButton.addEventListener("touchstart",backToHome)
	backAppBtn.addEventListener("touchstart",backToHome)
  resetButton.addEventListener("touchstart",backToHome)

   // 转盘变量
   var Turntable_id=[];
  var bingo_id;
  function turn() {
    // 抽中奖的code
    var lottery_code

    // 旋转角度（默认转两圈）
    var rotation_angle =720;
   
    $.get(`/api/wechat/v3-1/coupon-ticket-lottery?customer_id=${customer}`, function (res) {
    // console.log(res.coupon_ticket.id)
    this.bingo_id=res.coupon_ticket.id;
    // console.log(Turntable_id.indexOf(this.bingo_id))
    
    // 请求之后把按钮开关  一定时间之后再开启
    if (this.bingo_id) {            
      setTimeout(function(){
        flag = true;
      },4000)
    }

      // 判断抽中奖的id下标并相应添加旋转角度
    switch (Turntable_id.indexOf(this.bingo_id)) {
      //转3圈
      case 0:
          $('#lotteryImg').css({transform:`rotate(${rotation_angle+360}deg)`})
      
        break;
      case 1:
           $('#lotteryImg').css({transform:`rotate(${rotation_angle+300}deg)`})
     
           break;
      case 2:
           $('#lotteryImg').css({transform:`rotate(${rotation_angle+240}deg)`})
    
           break;
      case 3:
      $('#lotteryImg').css({transform:`rotate(${rotation_angle+180}deg)`})
  
      break;
      case 4:
      $('#lotteryImg').css({transform:`rotate(${rotation_angle+120}deg)`})
     
      break;
      case 5:
      $('#lotteryImg').css({transform:`rotate(${rotation_angle+60}deg)`})
  
      break
      default:
        break;
    }

//  $('#lotteryImg').addClass('addrotate')
      this.lottery_code = res.coupon_ticket.code
      $('.look_card').hide();
      $('.red_QRcode').hide();

      if (this.lottery_code) {
        if (! inDevice(WECHAT_BROWSER_UA)) {
          $.get(`/api/wechat/v3-1/boom-game/coupon-qr-code?customer_id=${customer}&code=${this.lottery_code}`, function (res) {
            // $('.red_QRcode').css('background', `url(${res.code_img_url})`)
            // $('.red_QRcode').css('background-size', 'cover')
            $('.red_QRcode > img').attr('src', res.code_img_url);
            $('.red_QRcode').show();
          })
        } else {
          $.post(`/api/wechat/v3-1/coupon-card?appid=${url_param.appid}&code=${this.lottery_code}&openid=${url_param.openid}`, function (res) {
              $('.look_card').show();
          })
        }
      }

      $('.red_cash').html('￥' + res.coupon_ticket.discount)
    })

    // 监听动画结束之后触发回调函数
    lotteryImg.addEventListener('transitionend', handle, false)

    function handle() {
      // 转盘停止转动一秒之后渲染获奖页面
      setTimeout(function () {
        $('.lotteryTitle').html('恭喜获得奖品')
        // $('.lotteryTitle').css('width','10rem')
        $('#lotteryImg').css('display', 'none')
        $('.lotteryIcon').css('display', 'none')
        $('#lotteryButton').css('display', 'none')
        $('.oneMore').css('display', 'block')
        if (! inDevice(WECHAT_BROWSER_UA)) { // App 中需要显示体验试妆 / 再玩一次 两个按钮
          $('.back_app')
            .css('display', 'block')
            .css('left', '3.6rem');

          $('.oneMore').css('left', '-3.6rem');
        }

        $('.red_envelope').css('display', 'block')
        $('.red_rules').css('display', 'block')
      }, 1000)
    }

  }

  var  flag=true; //按钮开关
  // 开始抽奖
  $("#lotteryButton").on("touchstart", function () {
    if (flag) {
      turn();
      flag=false;

    }else{
      return
    }
    
  })

  var mebtnopenurl = "http://mp.weixin.qq.com/s?__biz=MzA5MzU2MjU3Mw==&mid=218850712&idx=1&sn=53bfed8c43391843a6268706ccda8eb2&scene=1&key=1936e2bc22c2ceb5b8b45ee0ef26a5cc01639c3411c2cfd0bd74efb6f0a180003056abc9700e348732a0a5c963462d2f&ascene=1&uin=MjgxMTA4MTUwMQ%3D%3D&devicetype=Windows+7&version=61000721&pass_ticket=w4kQ%2FSFhaY2mmOE87ChVgbTRWP%2BctOhqXukbldnl%2FXb4%2BOxgCyIxSdzUjax%2FUmHK"
  var tit = ""
  var DFW = {
    appId: "",
    TLImg: "kaixinlian.jpg",
    url: "http://www.17sucai.com/",
    title: "开心消消乐-多多游戏",
    desc: "我消，我消，我消...！"
  }
  var onBridgeReady = function () {
    WeixinJSBridge.on('menu:share:appmessage', function (argv) {
      WeixinJSBridge.invoke('sendAppMessage', {
          "appid": DFW.appId,
          "img_url": DFW.TLImg,
          "img_width": "120",
          "img_height": "120",
          "link": DFW.url,
          "title": DFW.title + tit,
          "desc": DFW.desc
        }
      )
    })
    WeixinJSBridge.on('menu:share:timeline', function (argv) {
      WeixinJSBridge.invoke('shareTimeline', {
          "appid": DFW.appId,
          "img_url": DFW.TLImg,
          "img_width": "120",
          "img_height": "120",
          "link": DFW.url,
          "title": DFW.title + tit,
          "desc": DFW.desc
        }
      )
    })
  }
  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
  }

  function do_share(score) {
    document.title = "我获得了" + score + "分，一起来消星星吧！"

    document.getElementById("share").style.display = ""
    window.DFW.title = document.title
  }

  // function dp_submitScore(level,score) {
  // 	//alert("你获得" + score + "分");
  // 	if (score > 30) {
  // 		if (confirm("你获得了" + score + " 要不要通知下小伙伴们呢？")) {
  // 			do_share(score);

  // 		}
  // 	}
  // }


  // 阻止ios10以上双击放大
  var lastTouchEnd = 0
  document.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  })
  document.addEventListener('touchend', function (event) {
    var now = (new Date()).getTime()
    if (now - lastTouchEnd <= 300) {
      event.preventDefault()
    }
    lastTouchEnd = now
  }, false)

  // 阻止ios10以上双指放大
  document.addEventListener('gesturestart', function (event) {
    event.preventDefault()
  })

  /*动态改变根元素字体大小*/
  function recalc_fz() {
    // 获取客户端宽度
    // var clientWidth = document.documentElement.clientWidth

    // 这里不用 screen.width 因为 iPad Pro 的 App webview 打开时尺寸是错的 screen.width 是 320, innerWidth 是 768，
    // iPadPro 的设备逻辑宽是 1024 才对，不知道 iOS 怎么打开的 Webview，他暂时改不了
    var screenWidth = window.innerWidth;
    if (! screenWidth) return
    // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
    document.documentElement.style.fontSize = 200 * (screenWidth / 1536) + 'px'

  }

  recalc_fz()

  function formaturl() {
    const url_info = {}

    const url_object = window.location.href.split('#').shift().split('?').pop()

    url_object.split('&').forEach((url) => {
      const key = url.split('=').shift()
      const value = url.split('=').pop()

      if (key) {
        url_info[key] = value
      }
    })

    return url_info
  }

  // 获取客户id
  const url_param = formaturl()

  const customer = url_param.customer_id || ''
  /**
   * 返回首页
   */
  function backToHome() {
    console.log('Backing To App');

    try { // for iOS
      window.webkit.messageHandlers.getBack.postMessage('getBack')
    } catch (e) {
    }

    try { // for Android
      XJXX.back()
    } catch (e) {
    }

    if (inDevice('Windows')) {
      alert('返回首页')
    }
  }

  function inDevice(needle) {
    var needle_regex = new RegExp(needle, 'gi')
    return needle_regex.test(navigator.userAgent);
  }

  var mouseSize = 32
  var boxSize = 34
  // 判断是否为ipad
  function is_iPad() {
    if (inDevice('iPad')) {
      // mouseSize = 51
      // boxSize = 48
      mouseSize*=1.5
      boxSize*=1.5
      return true
    } else if (inDevice('panxsoft')){ // TODO android 大屏幕还需要调整
      //mouseSize = 62 // 34 51 76.5
      //boxSize = 60 // 32 48 72

      mouseSize*=2
      boxSize*=2
      return true
    } else {
      return false
    }
  }
 
  $('.replay-btn').on('touchstart', function () {
    gameMsgCenter.message('undialog', 'again')
  });

  $('.fail-btn').on('touchstart', function () {
      $('#failImg').hide();
  })

  $('.oneMore').on('touchstart', function () {
    $(lottery).hide();
    $(lotteryBackground).hide();
    // 点击再来一次 将转盘旋转角度复原至0
    $('#lotteryImg').css('transform','rotate(0deg)')
  })

  function checkRedirectWechatOAuth() {
    if (! inDevice(WECHAT_BROWSER_UA)) {
      return;
    }

    var url_info = formaturl();
    if (! url_info.openid) {
      location.href = location.origin + '/open-wechat/oauth'
        + '?redirect_url=' + encodeURIComponent(location.href)
        + '&appid=' + url_info.appid;
    }
  }

  // 跳转微信查看卡包
  $('.look_card').on('click', function redirectToWechatCardPage() {
    location.href = location.origin + '/wx-system/'
      + '?openid=' + url_param.openid
      + '&appid=' + url_param.appid
      + '#/card';
  })
</script>
<script type="text/javascript" src="js/game.min.js"></script>
</body>
</html>
